import React, { createContext, useContext } from "react";
// useContext只是用来接收而已，传递还是要用createContext
const nameContext = createContext();
const nickContext = createContext();

const Child2 = () => {
  // useContext可以代替Consumer
  // 传入context对象，返回对应的value对象
  const { name } = useContext(nameContext);
  const { nickname } = useContext(nickContext);

  return (
    <div>
      child2组件 - {name} - {nickname}
    </div>
  );
  // return (
  //   <div>
  //     child2组件 -{" "}
  //     <nameContext.Consumer>
  //       {(value) => {
  //         return (
  //           <nickContext.Consumer>
  //             {(val) => (
  //               <span>
  //                 {value.name} - {val.nickname}
  //               </span>
  //             )}
  //           </nickContext.Consumer>
  //         );
  //       }}
  //     </nameContext.Consumer>
  //   </div>
  // );
};

const Child1 = () => {
  return (
    <nickContext.Provider
      value={{
        nickname: "xiaosan",
      }}
    >
      <div>child1组件</div>
      <Child2 />
    </nickContext.Provider>
  );
};

const App = () => {
  return (
    <nameContext.Provider
      value={{
        name: "zhangsan",
      }}
    >
      <h2>useContext</h2>
      <Child1 />
    </nameContext.Provider>
  );
};

export default App;
